<!DOCTYPE html>
<html ng-app="plunker">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Playonline</title>

<link href="/newplayonline/style/css/bootstrapSpaceLab.css"
	rel="stylesheet">

<link rel="stylesheet" type="text/css"
	href="/newplayonline/style/css/styles.css" />

</head>

<body ng-controller="Index">
	<div ng-include src="'/newplayonline/page/menu.html'"></div>

	<div id="wrap">
		<div id="main" class="container clear-top">
			<section id="slide">
				<header></header>
				<section id="carrossel" class="carousel slide" data-interval="3000"
					data-ride="carousel">
					<div class="carousel-inner">
						<figure class="active item">
							<img alt="" src="/newplayonline/img/img1.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/newplayonline/img/img2.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/newplayonline/img/img3.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/newplayonline/img/img4.jpg">
						</figure>

					</div>
					<!-- Carousel nav -->

					<a class="carousel-control left" href="#carrossel"
						data-slide="prev"> <!--             <span class="glyphicon glyphicon-chevron-left"></span> -->

					</a> <a class="carousel-control right" href="#carrossel"
						data-slide="next"><!--  <span class="glyphicon"></span> -->
					</a>
				</section>
			</section>
		</section>
		<br />
		<div class="row">
			<div class="col-md-5">
				<div class="tile">
					<div class="tile-head tile-head-asfalt">
						Hoje
					</div>
					<div class="tile-body">
						<div class="row">
							<div class="col-md-4 tile-col-border">
								<p class="title lotoMania">LOTOMANIA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
							<div class="col-md-4 tile-col-border">
								<p class="title megaSena">MEGASENA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
							<div class="col-md-4 tile-col">
								<p class="title quina">QUINA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-7">
				<div class="tile">
					<div class="tile-head tile-head-belize">
						Amanhã
					</div>
					<div class="tile-body">
						<div class="row">
							<div class="col-md-3 tile-col-border">
								<p class="title lotoMania">LOTOMANIA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
							<div class="col-md-3 tile-col-border">
								<p class="title megaSena">MEGASENA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
							<div class="col-md-3 tile-col-border">
								<p class="title quina">QUINA</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
							<div class="col-md-3 tile-col">
								<p class="title lotofacil">LOTOFACIL</p>
								<p><strong>R$100.000,00</strong><p>
								<a href="#">Saiba mais</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Main jumbotron for a primary marketing message or call to action -->
		<div class="bs-component">
			<legend>{{legenda}}</legend>
			<table class="table table-striped table-hover ">
				<thead>
					<tr>
						<th><a href="#" ng-click="carregarByTipoDeBolao('1')"><img
								alt="" ng-disable="true"
								ng-src="http://www1.caixa.gov.br/loterias/resources/btnmegasena4512463.jpg">
						</a></th>
						<th><a href="#" ng-click="carregarByTipoDeBolao('2')"><img
								alt=""
								ng-src="http://www1.caixa.gov.br/loterias/resources/bntquina7894564.jpg">
						</a></th>
						<th><a href="#" ng-click="carregarByTipoDeBolao('3')"><img
								alt=""
								ng-src="http://www1.caixa.gov.br/loterias/resources/bntlotomania10231045.jpg">
						</a></th>
						<th><a href="#" ng-click="carregarByTipoDeBolao('4')"><img
								alt=""
								ng-src="http://www1.caixa.gov.br/loterias/resources/btnduplasena362450.jpg">
						</a></th>
						<th><a href="#" ng-click="carregarByTipoDeBolao('5')"><img
								alt=""
								ng-src="http://www1.caixa.gov.br/loterias/resources/bntlotofacil453412.jpg">
						</a></th>
					</tr>
				</thead>
			</table>

			</p>

			<!-- Main jumbotron for a primary marketing message or call to action -->
			<div class="bs-component">
				<legend>{{legenda}}</legend>
				<table class="table table-striped table-hover ">
					<thead>
						<tr>
							<th>Identificador</th>
							<th>Jogos</th>
							<th>Valor cota</th>
							<th>Total de cotas</th>
							<th>Cotas restante</th>
							<th>Quantidade</th>
							<th>Comprar</th>
						</tr>
					</thead>
					<tbody ng-repeat="bolao in boloes">
						<tr>
							<th>{{bolao.identificadorGrupo}}</th>
							<td><a data-toggle="modal" href="#myModal"
								ng-click="carregarJogos(bolao);"><img alt=""
									ng-src="/newplayonline/img/lupa-mini.png"> </a></td>
							<td>{{bolao.valorCota}}</td>
							<td>{{bolao.qtdCotas}}</td>
							<th>ADD</th>
							<td><select id="cotas" ng-model="cotas" class="form-control"
								ng-init="tamanho(bolao)">
									<option ng-repeat="valor in totalSelect[bolao.id]">{{valor}}</option>
							</select></td>
							<td><a href="/newplayonline/carrinho"
								ng-click="adicionarCarrinhoBolao(bolao,cotas)"><img alt=""
									ng-src="/newplayonline/img/carrinho-mini.png"> </a></td>
						</tr>
					</tbody>
				</table>
				<div id="source-button" class="btn btn-primary btn-xs"
					style="display: none;">&lt; &gt;</div>
			</div>
			<div class="modal" id="myModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<span><b>Playonline - Jogos</b></span>
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
							</button>
							<!-- <h4 class="modal-title" id="myModalLabel"><!--CARREGAR DINAMICO Mega Sena</h4> -->
						</div>
						<div class="modal-body">
							<div class="jumbotron">
								<span><h4>Muita sorte</h4></span><br /> <span> <!--CARREGAR DINAMICO-->
									<img alt="" ng-disable="true"
									ng-src="http://www1.caixa.gov.br/loterias/resources/btnmegasena4512463.jpg">
								</span>
								<h4>Default</h4>
								<pagination boundary-links="true" total-items="totalItems"
									data-current-page="currentPage" data-max-size="maxSize"
									ng-model="currentPage" class="pagination-sm"
									data-num-pages="numPages()" previous-text="&lsaquo;"
									next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

								<div data-pagination="" data-num-pages="numPages()"
									data-current-page="currentPage" data-max-size="maxSize"
									data-boundary-links="true"></div>
								<table class="table table-striped table-hover ">
									<thead>
										<tr>
											<th></th>
											<th>ID</th>
											<th>Jogo</th>
										</tr>
									</thead>
									<tbody ng-repeat="jogo in jogos">
										<tr>
											<td></td>
											<td>{{jogo.id}}</td>
											<td>{{jogo.sequencia}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">Fechar</button>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div ng-include src="'/newplayonline/page/footer.html'"></div>

	<script src="/newplayonline/javascript/recursos/jquery-1.11.1.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="/newplayonline/javascript/recursos/bootstrap.min.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/recursos/angular_2.min.js"></script>
	
	<script
		src="/newplayonline/javascript/recursos/storageprovider.js"></script>
		
	<script type="text/javascript"
		src="/newplayonline/javascript/control/angular-route.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/recursos/ui-bootstrap-tpls-0.11.0.min.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/control/index.js"></script>


</body>

</html>